<template>
  <div id="main">
    <div id="form">
      <el-form ref="parent" :model="parent" label-width="100px" class="demo-ruleForm" :rules="rules">
        <el-form-item prop="parentName" label="家长姓名" :label-width="formLabelWidth">
          <el-input v-model="parent.parentName" maxlength="20" autocomplete="off" />
        </el-form-item>
        <el-form-item prop="parentBirth" label="家长生日" :label-width="formLabelWidth">
          <el-date-picker
            v-model="parent.parentBirth"
            type="date"
            placeholder="选择日期"
            format="yyyy 年 MM 月 dd 日"
            value-format="yyyy-MM-dd"
          />
        </el-form-item>
        <el-form-item prop="parentCall" label="家长电话" :label-width="formLabelWidth">
          <el-input v-model="parent.parentCall" autocomplete="off" maxlength="11" onkeyup="this.value=this.value.replace(/[^\d.]/g,'');" />
        </el-form-item>
        <el-form-item prop="parentEmail" label="家长邮箱" :label-width="formLabelWidth">
          <el-input v-model="parent.parentEmail" maxlength="32" autocomplete="off" />
        </el-form-item>
        <el-form-item prop="parentAdd" label="家庭住址" :label-width="formLabelWidth">
          <el-input v-model="parent.parentAdd" maxlength="40" autocomplete="off" />
        </el-form-item>
        <el-form-item prop="parentEducationalLevel" label="家长文化水平" :label-width="formLabelWidth">
           <el-select v-model="parent.parentEducationalLevel" placeholder="请选择">
            <el-option
              v-for="item in Edu"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              :disabled="item.disabled"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="parentOccupation" label="家长职业" :label-width="formLabelWidth">
          <el-input v-model="parent.parentOccupation" maxlength="40" autocomplete="off" />
        </el-form-item>
        <el-form-item prop="parentSex" label="家长性别" :label-width="formLabelWidth">
          <!-- <el-input v-model="parent.parentSex" autocomplete="off" /> -->
          <el-radio v-model="parent.parentSex" label="0">女</el-radio>
          <el-radio v-model="parent.parentSex" label="1">男</el-radio>
        </el-form-item>
      </el-form>
      <div id="buttons">
        <el-button type="primary" @click="submitPhone('parent')">添加</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { addParent } from '@/api/parent'
import {validatePhone,validateEMail} from '@/api/validata'
export default {
  data() {
    var checkphone = (rule, value, callback) => {
    // let phoneReg = /(^1[3|4|5|6|7|8|9]\d{9}$)|(^09\d{8}$)/;
      if (value === '') {
        callback(new Error('请输入手机号'))
      } else if (!this.isCellPhone(value)) { // 引入methods中封装的检查手机格式的方法
        callback(new Error('请输入正确的手机号!'))
      } else {
        callback()
      }
    }
    return {
      parent: {
        number: ''
      },
      formLabelWidth: '100px',
      type: '',
      rules: {
        parentName: [{ required: true, message: "家长姓名不能为空", trigger: "blur" }],
        parentBirth:[{ required: true, message: "出生日期不能为空", trigger: "blur" }],
        parentCall:[{ required: true, message: "电话号码不能为空", trigger: "blur" },
        {validator:validatePhone,trigger:"blur"}],
        parentAdd:[{ required: true, message: "家庭住址不能为空", trigger: "blur" },],
        parentSex:[{ required: true, message: "家长性别不能为空", trigger: "blur" }],
        parentEmail:[{validator:validateEMail,trigger:"blur"}]
      },
      Edu: [{
          value: '选项1',
          label: '小学'
        }, {
          value: '选项2',
          label: '初中'
        }, {
          value: '选项3',
          label: '中专'
        }, {
          value: '选项4',
          label: '高中'
        }, {
          value: '选项5',
          label: '专科'
        }, {
          value: '选项6',
          label: '本科'
        }, {
          value: '选项7',
          label: '硕士研究生'
        }, {
          value: '选项8',
          label: '博士研究生'
        }, {
          value: '选项9',
          label: '博士后'
        }],
        value: '',
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
    },
    submitPhone(formName) {
      this.parent.parentBirthtoString = this.parent.parentBirth
      this.$refs[formName].validate((valid) => {
        if (valid) {
          addParent(this.parent).then((resp) => {
            this.$notify({
              title: '添加成功',
              type: 'success'
            })
            this.parent='';
          })
          return true
        } else {
          this.$notify({
            title: '请正确填写',
            type: 'error'
          })
          return false
        }
      })
    },
    isCellPhone(val) {
      if (!/^1[3456789]\d{9}$/.test(val)) {
        return false
      } else {
        return true
      }
    }
  }
}
</script>

<style scoped>
  #main{
    width: 100%;
  }

  #form{
    border: #E4E7ED 1px solid;
    border-radius: 30px;
    padding: 50px;
    margin: 50px auto;

    width: 900px;

  }
  #buttons{
    text-align: center;
  }
  input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    -o-appearance: none !important;
    -ms-appearance: none !important;
    appearance: none !important;
    margin: 0;
  }
  input[type="number"]{
    -webkit-appearance:textfield;
    -moz-appearance:textfield;
    -o-appearance:textfield;
    -ms-appearance:textfield;
    appearance:textfield;
  }
</style>
